<template>
    <div class="content-box" id="orderDetails">
        <div class="title">
            <p class="leftTip">来访者信息</p>
            
        </div>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">真实姓名：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">联系电话：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">性别：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">年龄：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">婚姻状态：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">微信号：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1"></li>
            <li class="flex_1"></li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">紧急联系人：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">联系电话：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">关系：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1"></li>
        </ul>

        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">是否有心理咨询经历：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">是否确诊过/正在治疗严重精神疾病（例如重度抑郁、精神分裂、人格障碍、双相障碍等）：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">近一个月内是否有自杀/自残的行为或计划：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1"></li>
        </ul>

        <div class="title">
            <p class="leftTip">服务信息</p>
        </div>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">咨询师姓名：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">商品ID：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">咨询服务名称：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">咨询类型： <span class="contentP">一般咨询服务</span></li>
        </ul>
            <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">咨询单价：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">咨询次数：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">咨询方式：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1"></li>
        </ul>
        
        <div class="title">
            <p class="leftTip">订单信息</p>
        </div>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">订单编号：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">下单时间：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">是否首次下单：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">订单状态： <span class="contentP">一般咨询服务</span></li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">订单类型：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">分成类型：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">咨询次数：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">支付方式：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">订单总额：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">优惠金额：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">已支付金额：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">待支付金额：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">退款金额：  <span class="contentP">测试</span></div>
            </li>
            <li  class="flex_1">
                <div class="labelP">退款方式：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">优惠类型：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">优惠详情：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">交易单号：  <span class="contentP">测试</span></div>
            </li>
        </ul>
        <ul class="flex_layout u_mt_10 u_ml_10">
            <li class="flex_1">
                <div class="labelP">申请取消订单原因：  <span class="contentP">测试</span></div>
            </li>
            <li class="flex_1">
                <div class="labelP">取消类型：  <span class="contentP">测试</span></div>
            </li>
        </ul>

    </div>
    
</template>

<script lang="ts" setup>
import { ref , reactive, computed} from 'vue'
import { ElMessage, ElMessageBox, FormInstance, } from 'element-plus'
import { Module } from 'vuex';

import { useRouter } from "vue-router";
import {useStore} from "vuex";



const store = useStore();
const router = useRouter();

let state: any = reactive({
    crumbList: computed(() => store.getters.getCrumbList),
    isSidebarNavCollapse: computed(
        () => store.getters.getIsSidebarNavCollapse
    ),
    msgNum: computed(() => store.getters.getMsgNum),
    classInfo:'',
    info:{
        a:{
            style:''
        }
    }
});


</script>


<style scoped lang="scss">
    #orderDetails{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        line-height: 30px;
        .title{
            margin-top: 10px;
        }
    }
    .conStyleP{
        float: left;
        line-height: 30px;
        width: 100px;
    }
    .footerBtn{
        margin-top: 100px;
        button{
            width: 400px;
        }
    }
</style>